import React, { Component } from 'react'
import { Spin, Button, Table } from 'antd'
import uuid from 'uuid'
import FileSaver from 'file-saver'

import { address } from '@/Utils/apiConfig'
import request from '@/Utils/fecth'

import './Detail.less'

export default class ChainCodeDetail extends Component {
  constructor(props) {
    super(props)
    this.state = {
      loading: true,
      detail: {},
    }
    const { type, name, language } = props.match.params
    this.type = type
    this.name = name
    this.language = language
  }

  componentDidMount() {
    this.getDetail()
  }

  async getDetail() {
    this.setState({
      loading: true,
    })
    const { status, data } = await request().get(address.chaincode.getContractDetail + `?type=${this.type}&name=${this.name}&language=${this.language}`)
    this.setState({
      loading: false,
    })
    if (status === 200) {
      this.setState({
        detail: {
          ...(data || {}),
          operation_steps: (data.operation_steps || []).map(v => ({ ...v, uuid: uuid() })),
          api_desc: (data.api_desc || []).map(v => ({ ...v, uuid: uuid() })),
        },
      })
    }
  }

  download = async() => {
    const { status, data, headers } = await request().get(address.chaincode.download, {
      responseType: 'blob',
      params: {
        type: encodeURIComponent(this.type),
        name: encodeURIComponent(this.name),
        language: encodeURIComponent(this.language),
      },
    })
    if (status === 200) {
      const reg = new RegExp('"', 'g')
      const fileName = decodeURIComponent(headers['content-disposition']
        .split(';')[1]
        .split('filename=')[1]
        .replace(reg, ''))
      FileSaver.saveAs(data, fileName)
    }
  }

  render() {
    const { loading, detail } = this.state
    return <div className="ChainCodeDetail">
      <Spin spinning={loading}>
        <div className="headInfo">
          <div className="head">
            <span>{detail.name}</span>
            <span>{detail.version}</span>
            <span>{detail.language}</span>
          </div>
          <div className="desc">{detail.desc}</div>
          <Button type="primary" onClick={this.download}>下载</Button>
        </div>
        <div className="table-container">
          <div className="title">接口描述</div>
          <Table rowKey={'uuid'} pagination={false} dataSource={detail.api_desc || []} columns={[
            {
              title: 'function_name',
              dataIndex: 'function_name',
            },
            {
              title: 'paremters',
              dataIndex: 'paremters',
              render: (v, record) => {
                return typeof record.paramters === 'string' ? record.paramters : JSON.stringify(record.paramters)
              },
            },
            {
              title: 'feature_intro',
              dataIndex: 'feature_intro',
            },
            {
              title: 'remark',
              dataIndex: 'remark',
              render: (v) => v || '-',
            },
          ]} />
        </div>
        <div className="table-container">
          <div className="title">操作步骤示例</div>
          <Table rowKey={'uuid'} pagination={false} dataSource={detail.operation_steps || []} columns={[
            {
              title: 'function_name',
              dataIndex: 'function_name',
            },
            {
              title: 'paremters',
              dataIndex: 'paremters',
              render: (v, record) => {
                return typeof record.paramters === 'string' ? record.paramters : JSON.stringify(record.paramters)
              },
            },
            {
              title: 'feature_intro',
              dataIndex: 'method',
            },
            {
              title: 'remark',
              dataIndex: 'intro',
              render: (v) => v || '-',
            },
          ]} />
        </div>
      </Spin>
    </div>
  }
}
